<template>
<div class="container">
  <div class="chart" ref="seller_ref">

  </div>
</div>
</template>
<script>
import { getData } from '../api/Seller'
import '@/../public/static/theme/chalk'
export default {
  name: 'Seller',
  data () {
    return {
      //
      chartInstance: null,
      allData: null,
      currentPage: 1,
      totalPage: 0,
      timerId: null
    }
  },
  mounted () {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed () {
    clearInterval(this.timerId)
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    // 获取容器初始化echarts图标
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.seller_ref, 'chalk')

      const initOption = {
        title: { text: '▎商家销售统计' },
        color: 'rgb(77, 131, 142)',
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: 'solid',
              color: ' rgba(255,255,255,0.3)'
            }
          }
        },
        series: [{
          type: 'bar',
          label: {
            show: true,
            position: 'right'
          },
          textStyle: {
            color: 'white'
          },
          itemStyle: {
            borderRadius: [0, 50, 50, 0],
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                offset: 0, color: '#5052ee' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgb(3, 130, 136)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }]
      }
      // echarts图表初始化配置项
      this.chartInstance.setOption(initOption)
      // 鼠标移入移出，定时器事件
      this.chartInstance.on('mouseover', () => { clearInterval(this.timerId) })
      this.chartInstance.on('mouseout', () => { this.startInterval() })
    },
    // 获取echarts图表数据
    async getData () {
      const { data: ret } = await getData()
      this.allData = ret.sort((a, b) => { return b.value - a.value })
      this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1
      this.updataChart()
      this.startInterval()
    },
    updataChart () {
      const start = (this.currentPage - 1) * 5
      const end = this.currentPage * 5
      const showData = this.allData.slice(start, end)
      const sellerNames = showData.map(item => item.name)
      const sellerValues = showData.map(item => item.value)
      // echarts数据图表配置项
      const option = {
        yAxis: { data: sellerNames },
        series: [{ data: sellerValues }]
      }
      // 将配置项设置给echarts实例对象
      this.chartInstance.setOption(option)
    },
    startInterval () {
      if (this.timerId) { clearInterval(this.timerId) }
      this.timerId = setInterval(() => {
        this.currentPage++
        if (this.currentPage > this.totalPage) {
          this.currentPage = 1
        }
        this.updataChart()
      }, 3000)
    },
    // 监听屏幕大小发生变化时完成屏幕的适配````````````拆分option
    screenAdapter () {
      console.log(this.$refs.seller_ref.offsetWidth)
      const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          },
          left: titleFontSize,
          top: titleFontSize
        },
        grid: {
          top: titleFontSize * 2,
          bottom: titleFontSize,
          left: titleFontSize
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize * 1.8
            }
          }
        },
        series: [{
          barWidth: titleFontSize * 1.8
        }]
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    }
  }

}
</script>

<style>

</style>
